<template>
  <div id="app">
    <!-- header -->
    <header>智慧商城</header>

    <!-- search -->
    <div class="search">
      <a href="javascript:;" class="searchCont">
        <i class="iconfont icon-sousuo"></i>
        <p>搜索商品</p>
      </a>
    </div>

    <MyStartSwiper :swiperList="swiperList"></MyStartSwiper>

    <div class="ad">
      <i class="iconfont icon-shengyin_shiti"></i>
      <div class="adCont">
        <p>智慧商城2.0全新上线，更多新品等你来选~</p>
      </div>
    </div>
    <MyStartNav :navrList="navrList"></MyStartNav>
    <MyStartGoods :goodsList="goodsList"></MyStartGoods>

    <!-- footer -->
    <footer>
      <a href="javascript:;" class="cur">
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-fenlei"></i>
        <p>分类</p>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-gouwuche"></i>
        <p>购物车</p>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-wode"></i>
        <p>我的</p>
      </a>
    </footer>
  </div>
</template>

<script>
import '@/assets/css/index.css'
import '@/assets/css/swiper.css'
import axios from 'axios'
import MyStartSwiper from './components/MyStartSwiper.vue'
import MyStartNav from './components/MyStartNav.vue'
import MyStartGoods from './components/MyStartGoods.vue'
export default {
  components: {
    MyStartSwiper,
    MyStartNav,
    MyStartGoods
  },
  data () {
    return {
      swiperList: '',
      navrList: '',
      goodsList: ''
    }
  },
  created () {
    axios({
      url: 'http://cba.itlike.com/public/index.php?s=/api/page/detail'
    }).then(res => {
      console.log(res)
      this.swiperList = res.data.data.pageData.items[1].data
      this.navrList = res.data.data.pageData.items[3].data
      this.goodsList = res.data.data.pageData.items[6].data
    })
  }
}
</script>

<style></style>
